<template>
  <el-row>
    <!-- <div class="infinite-list-wrapper" style="overflow:auto">
    <ul class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">-->
    <el-col :span="8" v-for="(item,i) in list" :key="i" class="list-item">
      <el-card shadow="hover" class="box-card">
        <div class="box">
          <img :src="item.img" alt />
          <p class="p1">{{item.name}}</p>
          <p class="p2">{{item.price}} 元起</p>
          <p class="p3">{{item.type.text}}</p>
        </div>
      </el-card>
    </el-col>
    <!-- </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>-->
  </el-row>
</template>


<script>
export default {
  props: ["cars"],
  data() {
    return {
      list: [],
      count: 6,
      loading: false,
    };
  },
  computed: {},
  mounted() {
    this.list = this.cars;
    console.log(this.list, 11111111);
  },
};
</script> 


<style lang="scss" scoped>
.box-card {
  margin: 0 6px;
  .box {
    height: 100%;
    position: relative;
    color: #ffffff;
    img {
      width: 100%;
      height: 240px;
    }
    .p1 {
      position: absolute;
      top: 3%;
      left: 5%;
      
    }
    .p2{
      position: absolute;
      left: 5%;
      bottom:3% ;
    }
    .p3{
      position: absolute;
      right: 5%;
      bottom:3% ;
    }
  }
}
</style>